<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
// import { gsap } from 'gsap';
// import SvgNode from '../common/SvgNode.vue';
// const animationPercentage = ref(0);
// const animationVisible = ref(false);
// let timeline: gsap.core.Timeline | null;
onMounted(() => {
  startAnimation();
});

const startAnimation = () => {
  function updateTime() {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    // 计算时针角度（每小时30度，每分钟0.5度）
    const hourAngle = (hours * 30) + (minutes * 0.5);
    // 计算分针角度（每分钟6度）
    const minuteAngle = minutes * 6;
    // 计算秒针角度（每秒钟6度）
    const secondAngle = seconds * 6;

    // 设置指针的旋转变换
    document.getElementById('hourHand').setAttribute('transform', `rotate(${hourAngle}, 250, 250)`);
    document.getElementById('minuteHand').setAttribute('transform', `rotate(${minuteAngle}, 250, 250)`);
    document.getElementById('secondHand').setAttribute('transform', `rotate(${secondAngle}, 250, 250)`);

    // 每秒更新一次
    requestAnimationFrame(updateTime);
  }
  // 初始调用更新时间函数
  updateTime();
}
</script>

<template>
  <svg width="500" height="500" viewBox="0 0 500 500" shape-rendering="geometricPrecision"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="VPImage image-src">
    <g id="frame-rzIf-2x">
      <path
        d="M250 500C388.071 500 500 388.071 500 250C500 111.929 388.071 0 250 0C111.929 0 0 111.929 0 250C0 388.071 111.929 500 250 500Z"
        shape-rendering="geometricPrecision" fill="#54575C" style="fill-rule:evenodd" transform="matrix(1 0 0 1 0 0)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 37C9 38.6569 7.65685 40 6 40L3 40C1.34315 40 0 38.6569 0 37L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 245 454)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 37C9 38.6569 7.65685 40 6 40L3 40C1.34315 40 0 38.6569 0 37L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 245 12)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.5000000000000001 -0.8660254037844386 0.8660254037844386 0.5000000000000001 33.99999931852587 146.7942395611706)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.7986355100472928 -0.6018150231520483 0.6018150231520483 0.7986355100472928 109.99999947184689 57.41633707791149)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.848048096156426 0.5299192642332049 -0.5299192642332049 0.848048096156426 376.01724016082306 47.99999831301009)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.5075383629607042 0.8616291604415257 -0.8616291604415257 0.5075383629607042 460.4865147934015 139.44879364625538)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.8191520442889918 -0.573576436351046 0.573576436351046 0.8191520442889918 357.59588381437237 424.36379168136995)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.5150380749100544 -0.8571673007021122 0.8571673007021122 0.5150380749100544 429.00001091815636 350.71452061875107)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.5446390350150272 0.8386705679454239 -0.8386705679454239 0.5446390350150272 70.77895136566865 350.36424409313076)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 31C9 32.6569 7.65685 34 6 34L3 34C1.34315 34 0 32.6569 0 31L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(0.8290375725550416 0.5591929034707469 -0.5591929034707469 0.8290375725550416 140.01256401785656 424.00000907008655)">
      </path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 37C9 38.6569 7.65685 40 6 40L3 40C1.34315 40 0 38.6569 0 37L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(6.123233995736766e-17 1 -1 6.123233995736766e-17 488 245)"></path>
      <path
        d="M0 3C0 1.34315 1.34315 0 3 0L6 0C7.65685 0 9 1.34315 9 3L9 37C9 38.6569 7.65685 40 6 40L3 40C1.34315 40 0 38.6569 0 37L0 3Z"
        shape-rendering="geometricPrecision" fill="#43474A" style="fill-rule:evenodd"
        transform="matrix(6.123233995736766e-17 1 -1 6.123233995736766e-17 46 245)"></path>
      <!-- <path
      d="M0 4C0 1.79086 1.79086 0 4 0L5 0C7.20914 0 9 1.79086 9 4L9 184C9 186.209 7.20914 188 5 188L4 188C1.79086 188 0 186.209 0 184L0 4Z"
      shape-rendering="geometricPrecision" fill="#E7E8E8" style="fill-rule:evenodd" transform="matrix(1 0 0 1 245 57)">
    </path>
    <path
      d="M0 5C0 2.23858 2.23858 0 5 0L8 0C10.7614 0 13 2.23858 13 5L13 146C13 148.761 10.7614 151 8 151L5 151C2.23858 151 0 148.761 0 146L0 5Z"
      shape-rendering="geometricPrecision" fill="#E7E8E8" style="fill-rule:evenodd" transform="matrix(1 0 0 1 243 99)">
    </path>
    <path
      d="M0 1.5C0 0.671573 0.671573 0 1.5 0L1.5 0C2.32843 0 3 0.671573 3 1.5L3 203.5C3 204.328 2.32843 205 1.5 205L1.5 205C0.671573 205 0 204.328 0 203.5L0 1.5Z"
      shape-rendering="geometricPrecision" fill="#F67326" style="fill-rule:evenodd" transform="matrix(1 0 0 1 248 45)">
    </path>
    <path
      d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
      shape-rendering="geometricPrecision" fill="#E7E8E8" style="fill-rule:evenodd" transform="matrix(1 0 0 1 240 240)">
    </path> -->
      <path
        d="M73.9104 0.946078C74.7929 0.308978 75.8259 -0.00373007 76.8546 3.95647e-05C77.8749 0.0014894 78.8981 0.314272 79.7733 0.946107L117 27.8213L117 17L135 17L135 40.8161L151.61 52.8077C154.203 54.6792 154.397 58.4695 152.009 60.5958L149.751 62.6064C148 64.1658 145.4 64.2988 143.499 62.9263L138.038 58.9841L138.038 148.787L137.966 148.787C136.884 153.349 110.115 157 77.25 157C43.6987 157 16.5 153.194 16.5 148.5C16.5 148.313 16.5433 148.127 16.6285 147.943L16.6285 58.2743L10.1848 62.9263C8.28363 64.2988 5.6841 64.1658 3.93295 62.6064L1.67495 60.5957C-0.712862 58.4694 -0.518945 54.6792 2.0734 52.8077L73.9104 0.946078Z"
        shape-rendering="geometricPrecision" fill="#F67326" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 173 343)">
      </path>
      <path
        d="M0 0L44.5091 0L44.5091 37.4706L0 37.4706L0 0ZM72 7.20588L52.3636 7.20588L52.3636 49L72 49L72 7.20588ZM0 41.7941L44.5091 41.7941L44.5091 49L0 49L0 41.7941Z"
        shape-rendering="geometricPrecision" fill="#54575C" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 215 427)">
      </path>
      <path
        d="M20.8 0L32.6857 0L32.6857 14L20.8 14L20.8 0ZM47.5571 2.8C46.7287 2.8 46.0571 3.47157 46.0571 4.3L46.0571 5.5C46.0571 6.32843 46.7287 7 47.5571 7L50.5 7C51.3284 7 52 6.32843 52 5.5L52 4.3C52 3.47157 51.3284 2.8 50.5 2.8L47.5571 2.8ZM0 4.2L13.3714 4.2L13.3714 14L0 14L0 4.2Z"
        shape-rendering="geometricPrecision" fill="#F67326" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 219 452)">
      </path>
      <path
        d="M4.88239 1.23508C4.8218 1.30662 4.76357 1.38115 4.70793 1.45864L0.657388 7.09883C-0.461371 8.65665 -0.118009 10.8247 1.42737 11.9606L3.6236 13.5749C5.19329 14.7286 7.40296 14.3787 8.53933 12.7963L9.63844 11.2659L10.3076 11.2659C10.6319 12.8635 12.0443 14.0659 13.7376 14.0659L16.4245 14.0659C18.1177 14.0659 19.5302 12.8635 19.8544 11.2659L19.9945 11.2659C20.3188 12.8635 21.7312 14.0659 23.4245 14.0659L26.1113 14.0659C27.8046 14.0659 29.217 12.8635 29.5413 11.2659L29.6814 11.2659C30.0056 12.8635 31.4181 14.0659 33.1113 14.0659L35.7982 14.0659C37.4915 14.0659 38.9039 12.8635 39.2282 11.2659L39.3682 11.2659C39.6925 12.8635 41.105 14.0659 42.7982 14.0659L45.4851 14.0659C47.1784 14.0659 48.5908 12.8635 48.9151 11.2659L49.0551 11.2659C49.3794 12.8635 50.7919 14.0659 52.4851 14.0659L55.172 14.0659C56.8653 14.0659 58.2777 12.8635 58.602 11.2659L58.742 11.2659C59.0663 12.8635 60.4787 14.0659 62.172 14.0659L64.8589 14.0659C66.5522 14.0659 67.9646 12.8635 68.2889 11.2659L68.4289 11.2659C68.7532 12.8635 70.1656 14.0659 71.8589 14.0659L74.5458 14.0659C76.0389 14.0659 77.3136 13.131 77.8165 11.8146L78.5802 12.878C79.7165 14.4603 81.9262 14.8103 83.4959 13.6565L85.6921 12.0422C87.2375 10.9063 87.5809 8.7383 86.4621 7.18047L82.4116 1.54029C82.2396 1.30089 82.0431 1.0897 81.828 0.907666C81.4655 0.398199 80.8702 0.0658852 80.1973 0.0658852L55.172 0.0658852L52.4851 0.0658852L45.4851 0.0658851L42.7982 0.0658851L35.7982 0.0658851L33.1113 0.0658851L33.1105 0.0658852L8.2299 0.0658852C7.78046 -0.0226743 7.32017 -0.021246 6.87609 0.0658852L6.7022 0.0658852C5.89405 0.0658852 5.19785 0.545211 4.88239 1.23508Z"
        shape-rendering="geometricPrecision" fill="#E7E8E8" style="fill-rule:evenodd"
        transform="matrix(1 0 0 1 206.0000010728836 416.0000022277236)"></path>
    </g>
    <!-- 时 -->
    <line id="hourHand" x1="250" y1="250" x2="250" y2="120" stroke="#ECECEC" stroke-width="14" stroke-linecap="round" />
    <!-- 分针 -->
    <line id="minuteHand" x1="250" y1="250" x2="250" y2="50" stroke="#ECECEC" stroke-width="9" stroke-linecap="round" />
    <!-- 秒针 -->
    <line id="secondHand" x1="250" y1="250" x2="250" y2="65" stroke="#F26522" stroke-width="4" stroke-linecap="round" />
    <!-- 中心圆点 -->
    <!-- <circle cx="200" cy="200" r="6" fill="#ECECEC" /> -->
    <!-- JavaScript 代码，用于实时更新指针角度 -->
    <path
      d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
      shape-rendering="geometricPrecision" fill="#E7E8E8" style="fill-rule:evenodd" transform="matrix(1 0 0 1 240 240)">
    </path>

  </svg>
</template>